Mini-projet

Les mini-projet définissent un objectif à réaliser (ici un simulateur d'épidémie) et donnent quelques directions et conseils. Des solutions peuvent être suggérées, mais la réalisation peut être assez libre et s'éloigner un peu des consignes de départ.

Il n'y aura donc pas de découpage progressif, et les solutions peuvent se faire par le biais de recherches personnelles, mais également en dialoguant avec le professeur qui assumera le rôle de chef de projet.

Le but est de réaliser un simulateur d'épidémie rudimentaire en HTML/CSS/Javascript (éventuellement JQuery). Les individus seront représentés par les cases d'un tableau dont les couleurs représentent les états possibles : sain, vacciné, malade. Des informations numériques devront apparaître pour détailler l'état de la population. Des champs de saisie permettront de modifier l'état initial de la population pour tester différents scénarios. Enfin, un affichage dynamique devra permettre de rendre compte de l'évolution de la situation en tenant compte des règles de transitions :
  • La population saine, malade et vaccinée est répartie au hasard dans le tableau
  • Un sain peut être contaminé par un voisin malade
  • Un vacciné ne peut pas être contaminé
  • Un malade ne peut pas être guéri
  • Le degré de contagion agit sur la probabilité qu'un malade contamine son voisin
  • Le degré de contagion pourrait aussi agir sur la portée de la contamination (voisin direct, ou à plusieurs cases de distance)
Voici à quoi pourrait ressembler l'affichage : Une fois le simulateur réalisé, il permettra de répondre à certaines questions concernant les effets de seuil : Quelles différences notables entre une petite et une large population ? Tester les situations extrèmes (presque tout le monde vacciné, presque tout le monde malade) Un équiitembre peut-il se produire, et sous quelles conditions ? Des situations de pandémies peuvent-elles se produire ? A partir de quelle proportion de vaccinés, les pandémies peuvent-elles être évitées dans notre modèle ? Utiliser le simulateur, une fois réalisé pour interpréter et tester des situations variées. Créer toute fonction permettant de mesurer des phénomènes observés empiriquement pour une analyse statistique plus fine et rédiger une synthèse des observations faites, des hypothèses testées et des conclusions faites par vos mesures.

La représentation se fera en HTML pour la structure (population, champs de saisie, bouton de démarrage, informations) et CSS pour la mise en forme (couleurs, positionnement). Dans un premier temps, réaliser une situation statique simple en HTML/CSS (5 lignes max). Par la suite, la table sera construite dynamiquement en Javascript.

  • La population pourra être représentée à l'aide d'une table, et les induividus à l'aide des cellules code(td)
  • La taille de la table devra être fixe dans la fenêtre du navigateur (width en css)
  • Les champs de saisie seront des input et les boutons des button
  • Utiliser des classes sur les éléments td pour gérer l'aspect des individus en css. Utiliser des id numérotés.
  • Les champs de saisie se feront avec input. Egalement marquer d'un code(id) chaque champ.
  • L'utilisation de formulaires form ne devrait pas être nécessaire.
 Dans la programmation des étapes, il faudra accéder et modifier les champs, et la table :
  • En JS, selectionner l'ensemble des cellules saines pourra se faire avec document.querySelectorAll('.sain')
  • En JS, selectionner l'ensemble la cellule numéro 12 pourra se faire avec document.querySelector('#12')
  • La valeur contenue dans un input code(input_n) de fait avec input_n.value
  • Modifier la valeur contenue dans un input input_n de fait avec input_n.value = nouvelle_valeur
  • Modifier l'attribut CSS d'une cellule individu se fait avec individu.style.nomDeLAttribut=nouvelle_valeur. Par exemple : individu.style.backgroundColor='#F00'
Il faudra créer une fonction capable de créer la table en respectant les paramètres saisis :
  • Avant toute chose, utiliser abondamment Math.random, et parseInt() pour créer aléatoirement des valeurs.
  • Une double boucle pour parcourir les cases d'un tableau for(i=0;i<n;i++){for(j=0;j<m;j++){...}}
  • Pour créer un noeud td, faire codvar individu = document.createElement('td')
  • Pour modifier un attribut, ajouter un id, ou une classe à individu, faire individu.setAttribute('name', 'michel'), individu.id='12', individu.className='sain'
  • Pour insérer individu dans une ligne tr, faire ligne.appendChild(individu)
  • Pour accéder ou modifier au contenu html d'un noeud, faire var txt=noeud.innerHTML ou noeud.innerHTML='<h1>titre important</h1>'
  • Pour plus d'information sur la manipulation du DOM , aller avoir sur openclassroom (par exemple...)
 Il faudra créer une fonction permettant de rafraîchir l'état de la population :
  • Pour relancer une fonction ma_fonction toutes les secondes, faire var id_interval=setInterval(ma_fonction, 1000) (mieux géré par les navigateurs, et plus facilement débuggable que plusieurs setTimeOut().
  • Pour arrêter la répétition faire clearInterval\0(id_interval);
 Il est plus naturel de différencier la population représentée sous forme de liste, variables ou objets de l'objet HTML la représentant graphiquement. Cela permettra notamment de séparer des fonctions créent ou modifient la population, des fonctions gérant l'affichage.
Ce modèle très simplifié pourrait être amélioré en ajoutant par exemple : Il peut être également intéressant d'aller plus loin dans la manière de programmer :